<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);


const online_list1 = ref([
    {
      id: "1",
      title: '广阔的用户覆盖',
      subTitle: "一点接触，多端投放，高效触达海量移动支付用户。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/alipayplus-rewards1.f3839d05.svg'
    },
    { 
      id: "2",
      title: '灵活的营销工具',
      subTitle: "为您量身定制品牌专区、定制游戏等互动机制和引流策略，维持用户活跃度。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/alipayplus-rewards2.c1cbde11.svg'
    },
    { 
      id: "3",
      title: '精准的支付转化',
      subTitle: "支持人群定向营销，匹配券售卖、订阅折扣等多种权益玩法，促进交易转化。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/alipayplus-rewards3.ad664cfe.svg'
    },
    {
      id: "4",
      title: '稳健的品效合一',
      subTitle: "助力全球品牌在当地市场深化品牌心智，促成交易金额和用户规模的齐头并进。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/alipayplus-rewards4.e2fbe147.svg'
    },
 ])


 const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*RFUiSoEbAqwAAAAAAAAAAAAADmesAQ/fmt.webp',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*xNEnSI9u6bEAAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})

const solution_images= ref([
    {
      "id": "1",
      "text": "我们重视与Antom的合作，因为它帮助我们巧妙地整合新的支付方式和营销平台，从而为消费者提供更多实惠，使我们能够触达并服务更广泛的顾客群体。",
      "src": "https://mdn.alipayobjects.com/huamei_e3pl6d/afts/img/A*2v-nT6DLWrgAAAAAAAAAAAAADmOsAQ/original",
    }
])

const pocket_list = [
  {
    id: '1',
    src: 'https://mdn.alipayobjects.com/huamei_e3pl6d/afts/img/A*sT4XSaX2dmkAAAAAAAAAAAAADmOsAQ/original'
  },
  {
    id: '2',
    src: 'https://mdn.alipayobjects.com/huamei_e3pl6d/afts/img/A*_52aQp17Yn8AAAAAAAAAAAAADmOsAQ/original'
  },
  {
    id: '3',
    src: 'https://mdn.alipayobjects.com/huamei_e3pl6d/afts/img/A*yxCnTpFYPeUAAAAAAAAAAAAADmOsAQ/original'
  },
  {
    id: '4',
    src: 'https://mdn.alipayobjects.com/huamei_e3pl6d/afts/img/A*UVC_Sqvvx6MAAAAAAAAAAAAADmOsAQ/original'
  },
  {
    id: '5',
    src: 'https://mdn.alipayobjects.com/huamei_e3pl6d/afts/img/A*Xlk9S6UjH50AAAAAAAAAAAAADmOsAQ/original'
  },
  {
    id: '6',
    src: 'https://mdn.alipayobjects.com/huamei_e3pl6d/afts/img/A*WftATpA5GtAAAAAAAAAAAAAADmOsAQ/original'
  },
]

/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();
  new Player({
    id: "mse", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    autoplay: true, //自动播放
    screenShot: false, // 开启截图功能
    loop: true,
    fullscreen: true,
    //视频地址
    url: 'https://gw.alipayobjects.com/v/huamei_pwpjvv/afts/video/A*WspXT44PCS0AAAAAAAAAAAAADmesAQ',

    //封面图
    poster:
        'https://gw.alipayobjects.com/v/huamei_pwpjvv/afts/video/A*WspXT44PCS0AAAAAAAAAAAAADmesAQ',
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
  });
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <!-- 主图-->
     <banner-main
      :isShowDoc="false"
      themeColor="black"
      :lists="carousel_Images" 
      title="A+ Rewards" 
      subTitle="A+ Rewards 是Antom携手数字支付伙伴共建的数字化营销阵地。一站式用户营销产品解决方案提供丰富的用户运营与支付转化工具，助力您与全球消费者更深入地互动，实现业务增长。"
     ></banner-main>
     <div class="mx-auto d-flex justify-center w-8/12">
            <div 
            v-for="bl in online_list1"
            :key="bl.id"
            class="bg-white d-flex justify-center align-center rounded-lg"
            >
            <div class="w-3/12 d-flex flex-column align-center h-[400px] w-[340px] text-center px-10">
                <div>
                    <v-img width="200px" height="200px" cover :src="bl.src"/>
                </div>
                <span class="font-semibold text-2xl mt-4  mb-10">{{ bl.title }}</span>
                <span class="">{{ bl.subTitle }}</span>
            </div>
            </div>
      </div>
      <div class="w-9/12 mx-auto d-flex justify-between mt-56">
          <div class="w-3/12 d-flex flex-column justify-center text-center text-[#000] font-bold text-[32px]">
              <span>专门提供优惠的端内阵地</span>
              <span class="text-[20px] text-[rgba(0,0,0,.6)] mt-10">多渠道帮您连接全球消费者。</span>
          </div>
          <div class="w-8/12">
            <div id="mse" class=" h-[720px]"></div>
          </div>
      </div>

      <v-sheet class="mt-40">
        <v-carousel
          cycle
          height="400"
          hide-delimiters
          show-arrows-on-hover
          :show-arrows="false"
        >
          <v-carousel-item
            v-for="(s, i) in solution_images"
            :key="i"
            class="mx-auto w-9/12 h-full"
          >
            <div class="mx-auto d-flex justify-center align-center flex-wrap text-xl text-center h-full">
                <div class="w-6/12 d-flex flex-column justify-center align-center bg-blue-800 h-full text-white rounded-l-[40px] p-10">
                  <span>{{ s.text }}</span>
                </div>
                <div class="w-6/12 d-flex flex-column justify-center align-center bg-gradient-to-r from-cyan-500 to-blue-500 h-full rounded-r-[40px]">
                  <div class="d-flex flex-column justify-center align-center shadow-lg shadow-indigo-500/50 rounded-lg">
                    <v-img class=" rounded-lg bg-white" width="240" height="120" :src="s.src"/>
                  </div>
                </div>
            </div>
          </v-carousel-item>
        </v-carousel>
    </v-sheet>
    <div class="font-semibold text-3xl text-center mt-40 mb-40">6个亚洲主流的电子钱包现已接入A+ Rewards</div>
    <div class="w-9/12 mx-auto d-flex justify-between">
       <div v-for="item in pocket_list" :key="item.id" class="bg-[#f9fafb] w-[200px] h-[88px]">
          <v-img :src="item.src"></v-img>
       </div>
    </div>


    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>
    :deep(.xgplayer-controls.controls-autohide) {
        display: none;
    }
    :deep(video) {
        width: 100%;
        height: 100%;
        object-fit: fill; /* 或者使用 contain，根据需求选择 */
    }

    #mse {
      height: 720px!important;
    }
</style>